<template>
  <div>

    <a-form ref="policyForm" class="form"  :form="policyForm">

      <a-row>
        <a-col :span="24">
          <a-form-item label="标题" :labelCol=" { span: 5 }" :wrapperCol=" { span: 13 }">
            <a-input
              placeholder="请输入标题"
              maxlength="50"
              v-model="policyFormData.title"
              autocomplete="off"
              v-decorator="['policyFormData.title',
                                {rules: [{ required: true, message: '请输入标题', whitespace: true}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="发布人" :labelCol=" { span: 5 }" :wrapperCol=" { span: 13 }">
            <a-input
              placeholder="请输入发布人"
              maxlength="50"
              v-model="policyFormData.sendPeople"
              autocomplete="off"
              v-decorator="['policyFormData.sendPeople',
                                {rules: [{ required: true, message: '请输入发布人', whitespace: true}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="时间" :labelCol=" { span: 5 }" :wrapperCol=" { span: 13 }">
            <!--:defaultValue="moment(policyFormData.useEndTime, 'YYYY-MM-DD')"-->
            <a-date-picker
              format="YYYY-MM-DD"
              style="width: 100%"
              :disabledDate="disabledDate"
              placeholder="时间"
              :value="policyFormData.id?moment(policyFormData.date, 'YYYY-MM-DD'):moment(new Date(), 'YYYY-MM-DD')"
              @change="dataChangeValidBegintime"
              :showToday="false"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="行政区划" :labelCol=" { span: 5 }" :wrapperCol=" { span: 13 }">
            <a-input
              placeholder="请输入行政区划"
              maxlength="50"
              v-model="policyFormData.area"
              autocomplete="off"
              v-decorator="['policyFormData.area',
                                {rules: [{ required: true, message: '请输入行政区划', whitespace: true}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="关键词" :labelCol=" { span: 5 }" :wrapperCol=" { span: 13 }">
            <a-input
              placeholder="请输入关键词"
              maxlength="50"
              v-model="policyFormData.keyWord"
              autocomplete="off"
              v-decorator="['policyFormData.keyWord',
                                {rules: [{ required: true, message: '请输入关键词', whitespace: true}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="内容" :labelCol=" { span: 5 }" :wrapperCol=" { span: 13 }">
            <a-textarea
              placeholder="请输入内容"
              maxlength="350"
              v-model="policyFormData.content"
              autocomplete="off"
              :autosize="{ minRows: 4, maxRows: 7 }"/>
          </a-form-item>
        </a-col>



      </a-row>

    </a-form>

  </div>
</template>

<script>
  let newDate = new Date().getFullYear()+"-"+new Date().getMonth()+1 +"-" +new Date().getDate();
  import FooterToolBar from '@/components/tools/FooterToolBar'
  import cities from '@/db/cities'
  import indexedDB from '../../db/db'
  import {getBase64} from '../../utils/util'
  import moment from "moment"
  export default {
    name: "policyFormTemplate",
    components: {
      FooterToolBar,
    },
    props:{
      policyFormDataJson:Object
    },
    data() {
      return {
        options:cities,
        loading: false,

        policyForm:this.$form.createForm(this),
        fileImgList:"",
        policyFormData:{
          title:"",
          sendPeople:"",
          date:newDate,
          area:"",
          keyWord:"",
          content:"",
        },

      }
    },
    mounted(){
      this.policyFormData = this.policyFormDataJson;
    },
    methods: {

      handleDivisonChange(e){

      },
      disabledDate(current) {
        // Can not select days before today and today
        // return current && current < moment().endOf('day');
        let yd = new Date().getDate();
        let y  = new Date().getFullYear();
        let m  = new Date().getMonth()+1;
        return current && current < new Date(y+"-"+m+"-"+yd);
      },
      moment,
      /*日期赋值*/
      dataChangeValidBegintime(data,pic){
        this.policyFormData.date = pic;
      },

      saveFormData(){
        let _this = this
        this.policyForm.validateFields((err, values) => {
          // console.log(values);
          // console.log(err);
          if (!err) {
            indexedDB.insert({name:"policy"},_this.policyFormData).then((res)=>{
              console.log(res);
              if(res==true){
                _this.$message.info("提交成功");
                _this.policyFormData = {
                  title:"",
                  sendPeople:"",
                  date:newDate,
                  area:"",
                  keyWord:"",
                  content:"",
                };
                _this.policyForm.resetFields();
              }else{
                this.$message.error("保存失败！");
              }
            });
          }else{
            _this.$message.error("请输入必填值");
          }
        })

      },

      handleEdit(record){
        this.policyFormData = Object.assign({}, record)
        setTimeout(()=>{
          this.policyForm.setFieldsValue({
            "policyFormData.title":this.policyFormData.title,
            "policyFormData.sendPeople":this.policyFormData.sendPeople,
            "policyFormData.area":this.policyFormData.area,
            "policyFormData.keyWord":this.policyFormData.keyWord,
          })

        }, 200);

      },
      editeSaveFormData(){
        let _this = this
        console.log(_this.policyFormData)
        _this.policyFormData.state = "待审核";
        this.policyForm.validateFields((err, values) => {
          // console.log(values);
          // console.log(err);
          if (!err) {
            indexedDB.update({name:"policy"},_this.policyFormData).then((res)=>{
              console.log(res);
              if(res==true){
                _this.$message.info("保存成功");
                _this.policyFormData = {
                  title:"",
                  sendPeople:"",
                  date:newDate,
                  area:"",
                  keyWord:"",
                  content:"",
                };
                _this.policyForm.resetFields();
                this.$emit('fatherEditMethod');
              }else{
                _this.$message.error("保存失败！");
              }
            });
          }else{
            _this.$message.error("请输入必填值");
          }
        })
      },


    },
  }
</script>

<style lang="scss" scoped>
  .card {
    margin-bottom: 24px;
  }
</style>